<template>
<div id="itservice">
    <div class="itservice">
         <div class="processit-title">
          <mt-header title="IT服务" class="mt-header">
             <mt-button icon="back" slot="left" class="back" @click="$root.goBack()">返回</mt-button>
         </mt-header>
        </div>
        <div class="replace"></div>
        <div class="itservice-navbar">
            <mt-navbar class="page-part" v-model="selected">
                <mt-tab-item id="1" >运维服务类</mt-tab-item>
                <mt-tab-item id="2" >应用系统类</mt-tab-item>
            </mt-navbar>
            <!-- tab-container -->
            <mt-tab-container v-model="selected">
                  <mt-tab-container-item id="1">
                     <div class="tab-container">
                        <div class="selected"></div>
                         <ul>
                             <li>
                                <p>服务目录</p>
                                <div class="button-sort service-title">
                                    <mt-button 
                                        type="primary"
                                        size="small" 
                                        v-for="(item,index) in buttonInfor" :key="item.index" 
                                        v-model="remark"
                                        :type="index==indexs?'primary':'default'"
                                        @click="toggleSelected(index,item.name)" 
                                     >{{item.name}}</mt-button>
                                </div>
                             </li>
                            <li>
                                <p>联系方式</p>
                                <div class="button-sort">
                                    <input type="text" placeholder="默认本人手机" class="mobilenum" v-model="mobile">
                                </div>
                            </li>
                               <li>
                                <p>问题描述</p>
                                <div class="button-sort ">
                                   <textarea v-model="content" class="problemdes" placeholder="接受应用系统方面的问题手里。（代人保障请留保障本人姓名
、工号、联系方式，谢谢！）"></textarea>
                                   
                                    <a href="#" class="uploadImg" @click="getpicture">
                                        <img src="../assets/ic-upload.png" alt="">
                                        <span>上传图片</span>
                                         <mypicture v-model="show" v-show="isshow" @on-feedback="feedback"></mypicture>
                                    </a>
                                     <div class="imgview">
                                      <ul>
                                        <li v-for="(item,index) in imgList" :key="index">
                                          <img :src="item" alt="">
                                          <i @click="delImg(index)"></i>
                                        </li>
                                      </ul>
                                       
                                    </div>
                                </div>
                            </li>
                         </ul>
                     </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <div class="tab-container2">
                        <div class="selected2" ></div>
                         <ul>
                             <li>
                                <p>服务目录</p>
                                <div class="button-sort">
                                     <mt-button 
                                        type="primary"
                                        size="small" 
                                        v-for="(item,index) in buttonInfor2" :key="item.index" 
                                        :type="index==indexs?'primary':'default'"
                                        @click="toggleSelected(index,item.name)" 
                                     >{{item.name}}</mt-button>
                                </div>
                             </li>
                            <li>
                                <p>联系方式</p>
                                <div class="button-sort">
                                    <input type="text" placeholder="默认本人手机" class="mobilenum" v-model="mobile">
                                </div>
                            </li>
                               <li>
                                <p>问题描述</p>
                                <div class="button-sort clearfix">
                                   <textarea v-model="content2" class="problemdes " placeholder="接受应用系统方面的问题手里。（代人保障请留保障本人姓名、工号、联系方式，谢谢！）"></textarea>
                                    <a href="#" class="uploadImg" @click="getpicture">
                                        <img src="../assets/ic-upload.png" alt="">
                                        <span>上传图片</span>
                                         <mypicture v-model="show" v-show="isshow" @on-feedback="feedback"></mypicture>
                                    </a>
                                     <div class="imgview">
                                         <ul>
                                        <li v-for="(item,index) in imgList" :key="index">
                                          <img :src="item" alt="">
                                          <i @click="delImg(index)"></i>
                                        </li>
                                      </ul>
                                    </div>
                                </div>
                            </li>
                         </ul>
                     </div>
                </mt-tab-container-item>
            </mt-tab-container>
      </div>
      <!-- 提交 -->
      <footer class="btnsubmit">
          <button @click="addItService">提交</button>
      </footer>
    </div>
</div>
</template>

<script>
import { Navbar, TabItem, Button,MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import service from "../service";
import config from "configuration";
import mypicture from "../components/Picture/index";
export default {
  components: {
    Navbar,
    TabItem,
    Button,
    mypicture,
    MessageBox
  },
  name: "itservice",
  data() {
    return {
      imgList:[],
      type: 5,
      remark: "电脑类",
      show: false,
      isshow: false,
      fileUrl:"",
      imgurl: "",
      imgurl2:"",
      base64Code: "",
      content: "",
      content2:"",
      mobile: "",
      workcode: "",
      selected: "1", //这里必须要设置成string
      indexs: 0,
      buttonInfor: [
        { name: "电脑类", index: 0 },
        { name: "网络类", index: 1 },
        { name: "打印机", index: 2 },
        { name: "会议室", index: 3 },
        { name: "其他", index: 4 }
      ],
      buttonInfor2: [
        { name: "CRM", index: 0 },
        { name: "PMS", index: 1 },
        { name: "SAP", index: 2 },
        { name: "PLM", index: 3 },
        { name: "RDM", index: 4 },
        { name: "WMS", index: 5 },
        { name: "OA", index: 6 },
        { name: "MES", index: 7 },
        { name: "LOMS", index: 8 },
        { name: "BI", index: 9 },
        { name: "微信", index: 10 },
        { name: "费用报销", index: 11 },
        { name: "AMS影像", index: 12 }
      ]
    };
  },
  mounted() {
    this.getUserInfo();
  },
  watch: {
    content2:function(val){
      console.log(this.content2.length)
    },
    //使用watch监视navbar id的变化
    selected: function(val, oldVal) {
      //val     切换后 id
      //oldVal  切换前 id
      if (val == "2") {
        this.type = 4;
        this.remark = "CRM";
        this.content=this.content2;
        this.imgurl=this.imgurl2;
      } else {
        this.type = 5;
        this.remark = "电脑类";
        this.content=this.content;
        this.imgurl=this.imgurl;
      }
    
      // console.log(this.remark);
    }
  },
  computed: {
    ...mapGetters({
      loading: "getLoading",
      direction: "getDirection"
    })
  },
  methods: {
    delImg(index){
       this.imgList.splice(index, 1);
       console.log(this.imgList)
    },
    addItService() {
      if(this.content.length<=0&&this.content2.length<=0){
         MessageBox({
          title: "提示",
          message: "请您输入问题描述！"
        });
        return ;
      }
      var params = {};
      params.dept = 3;
      params.type = this.type;
      params.content = this.content||this.content2;
      params.userId = this.workcode;
      params.fileUrl = this.fileUrl;
      params.remark = this.remark;
      params.mobile = this.mobile;
      console.log(params)
      service.getaddIt(params).then(res => {
        if (res.code == 100) {
           setTimeout(() => {
             this.$router.push({name:'progressquery'})
           }, 1000);
        }
      });
    },
    // 拍照和本地上传
    feedback(imgObj) {
      // alert(imgObj.base64Code);
      this.isshow = false;
      // console.log(imgObj);
      this.base64Code = imgObj.base64Code;
      this.imgurl = imgObj.base64Url;
      this.imgList.push(imgObj.base64Url);
      // console.log(this.imgList)
      var imageData = {
        data: this.imgurl,
        userId: this.workcode,
        group: "demon"
      };
      service.postUpload(imageData).then(res => {
        if (res.code == 100) {
          // console.log(res)
          this.fileUrl=res.output.url;
        }
      });
    },
    getpicture() {
      this.show = true;
      this.isshow = true;
      // console.log(this.show)
    },
    getUserInfo() {
      service.getUser().then(data => {
        var params = {};
        params.workcode = this.workcode = data.employeenumber;
        service.getUserMobile(params).then(res => {
          this.mobile = res.data;
        });
      });
    },
    toggleSelected(index, name) {
      this.indexs = index;
      this.remark = name;
    }
  }
};
</script>
<style scoped>
.tab-container2 .mint-button--small {
  width: 16%;
}
.tab-container2 .mint-button--small:nth-child(12) {
  width: 35.4%;
}
.tab-container2 .mint-button--small:nth-child(13) {
  width: 35.4%;
}
.mint-navbar a:hover {
    color:none;
}
</style>